<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">{{ 'settings.network.title_network_interfaces' | translate }}</h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="closeAndReset()"
    ></button>
  </div>
  <div class="modal-body">
    <div class="text-center mb-3"><i class="fas fa-ethernet primary-text" style="font-size: 75px"></i></div>
    <ul class="mb-3">
      <li>{{ 'settings.network.message_network_interface' | translate }}</li>
    </ul>
    <ul class="list-group list-group-box">
      @for (adapter of adaptersAvailable; track adapter) {
      <li class="list-group-item d-flex justify-content-between align-items-center flex-row pb-2">
        <div>
          <span class="font-monospace">{{ adapter.ip4 || adapter.ip6 }}</span><br />
          <span class="font-monospace grey-text">{{ adapter.iface }}</span>
        </div>
        <span>
          <input
            type="checkbox"
            class="rendux-input"
            [id]="'adapter' + adapter.iface"
            [(ngModel)]="adapter.selected"
            (ngModelChange)="onAdapterSelectionChange()"
          />
          <label [for]="'adapter' + adapter.iface" class="rendux-label ms-3"></label>
        </span>
      </li>
      }
    </ul>
  </div>

  <div class="modal-footer justify-content-between">
    <div class="text-start">
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="closeAndReset()"
        [attr.aria-label]="'form.button_close' | translate"
      >
        {{ 'form.button_close' | translate }}
      </button>
    </div>
    <div class="text-center"></div>
    <div class="text-end">
      <button type="button" class="btn btn-primary" data-bs-dismiss="modal" [disabled]="isUnchanged" (click)="submit()">
        {{ 'form.button_save' | translate }}
      </button>
    </div>
  </div>
</div>
